import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 引入全局样式
import "./assets/css/overallSituation.css";
import "normalize.css";
// 注册全局组件骨架瓶
import Skeleton from "@/components/Index/Skeleton";
Vue.component("Skeleton", Skeleton);
Vue.config.productionTip = false;
// 注册确认弹窗组件
import ConfirmBox from "./components/utils/Confirm";
Vue.prototype.$confirm = ConfirmBox;
// 注册对话框组件
// import Dialog from "./components/utils/Dialog/Dialog";
// Vue.prototype.$dialog = Dialog;
// 注册弹框组件
import Message from "./components/utils/Message";
Vue.prototype.$message = Message;
// 引入默认图片
import errorImg from "@/assets/img/404.png";
// 注册全局自定义指令
Vue.directive("lazyImg", {
  // 有五个钩子函数 然后bind中不能操作dom元素 只能在inserted中操作dom元素
  // el是绑定的dom元素 binding 数据对象
  inserted(el, binding) {
    let observer = new IntersectionObserver(([{ isIntersecting }]) => {
      if (isIntersecting) {
        // 将传递过来的属性赋值给dom元素的src属性
        el.src = binding.value;
        // 加载完毕结束监听
        observer.observe(el);
        // 图片加载失败的时候 让他显示默认的图片 onerror是js自带的加载失败方法
        el.onerror = () => {
          el.src = errorImg;
        };
      }
    });
    // 监听dom元素
    observer.observe(el);
  },
});
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
